import React, { useState } from "react";

// hooks是16.8版本新增的功能
// hooks只能给函数组件用的，增强函数组件的功能(state，生命周期等)

// 自定义hooks做函数式编程(vue里面的组合式api),将相同功能的代码进行聚合
// 如果想做功能分发，可以使用高阶组件等。高阶组件会让组件层级变深。hooks不会让组件层级变深。

// useState就是给函数组件定义state用的
const App = () => {
  // hooks都是函数，调用的时候只能在函数组件的顶层调用
  // useState返回一个数组，[变量，改变变量的方法], 传入一个参数是变量的初始值
  // 改变变量的方法依旧是异步的,只用useState是没有办法得到改变以后的值的
  const [count, setCount] = useState(3);
  const add = () => {
    // setCount(10);
    setCount((v) => v + 1);
    console.log(count);
  };

  const [name, setName] = useState("zhangsan");

  return (
    <>
      <h2>useState</h2>
      <p>count: {count}</p>
      <button onClick={add}>btn</button>

      <p>name: {name}</p>
      <button onClick={() => setName("lisi")}>btn2</button>
    </>
  );
};

export default App;
